<template>
  <div class="pie-box" :style="{ width: width, height: height }" @mouseenter="stopData()" @mouseleave="startData()">
    <!--    <div class="row-data">-->
    <!--        <span>{{rollDataValue}}</span>-->
    <!--       <div>{{rollDataText}}</div>-->
    <!--    </div>-->
    <div v-show="flag" @mouseenter="stop()" @mouseleave="start()" class="echarts" ref="echarts"
      :style="{ height: height }"></div>
    <div v-show="!flag" class="no-data-echarts">
      {{ message }}
    </div>
  </div>
</template>
<script>
import mixincomon from '../../mixins/mixincomon';
import util from '@/libs/util';
export default {
  name: "chart",
  mixins: [mixincomon],
  data() {
    return {
      timeDataFlag: null,//数据轮训定时
      lightIndex: 0,//默认第一个模块高亮
      flag: true,
      rollDataValue: 0,
      options: {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },

        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: "category",
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            show: false,
            interval: 0,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 20,
          },
        },
        radiusAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 20,
          },
        },
        calculable: true,
        series: [
          {
            type: "pie",
            radius: '70%',
            center: ["50%", "50%"],
            emphasis: {
              scale: false,
            },
            labelLine: {
              show: false,
              length: 30,
              length2: 55,
            },
            itemStyle: {
              normal: {
                borderWidth: 0,
                borderColor: "#132E4E",
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  color:util.cookies.get('theme')=='2'? "#f3f3f3":"#132E4E",
                },
                tooltip: {
                  show: false,
                },
              },
            ],
          },
          {
            type: "pie",
            radius: ["50%", "70%"],
            center: ["50%", "50%"],
            roseType: "area", // 展示南丁格尔图
            zlevel: 10,
            label: {
              show: true,
              formatter: function (param) {
                return (
                  "{a|" + param.name + "}" + "{s|" + " " + param.percent + "%}\n\n"
                );
              },
              padding: [0, -70],
              height: 60,
              rich: {
                a: {
                  color:util.cookies.get('theme')=='2'? "#333":"#fff", 
                  fontSize: "15",
                },
                s: {
                  color:util.cookies.get('theme')=='2'? "#69dcc1":"#00ffff",
                  fontSize: "14",

                },
              },
              // position: "outside",
            },
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: true,
              },
            },

            itemStyle: {
              normal: {
                borderWidth: 0,
                borderColor: "#132E4E",
              },

            },
            labelLine: {
              show: true,
              length: 20,
              length2: 60,
              color: "#46d6ff",
              lineStyle: {
                type: "dashed",
                width: 2,
              },
            },

            data: [
              {
                value: 15,
                name: "正常",
              },
              {
                value: 12,
                name: "故障",
              },
              {
                value: 16,
                name: "报废",
              },
            ],
          },
        ],
      },

    }
  },
  props: {
    option: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rollData: {
      type: Boolean,
      default: false,
    },
    rollDataText: {
      type: String,
      default: '隐患设备'
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    })
  },
  watch: {

  },
  methods: {

    init() {
      if (this.data.length > 0) {
        let _option = _.merge(this.options, this.option);
        this.flag = true;
        this.$nextTick(() => {
          let legend = [], series = [];
          this.data[0].data.map((item) => {
            legend.push(item.name ? item.name : '');
          })

          _option.series[1].data=this.data[0].data;
          debugger
    
          this.optionCureen = _.cloneDeep(_option);
          this.initChart('echarts', this.optionCureen);
          this.start();
          this.startData();
        })

      } else {
        this.clearChart();
        this.flag = false;
      }
    },
    setTime() {//动态塞入数据
      this.stop();
      let _index;
      console.log(this.optionCureen, 'eeee===')
      this.setTimeFlag = setInterval(() => {
        _index = this.index % this.optionsEnd.series[0].data.length;
        this.optionCureen.series[0].data.shift();
        this.optionCureen.series[0].data.push(this.optionsEnd.series[0].data[_index]);
        // console.log(this.optionCureen.series[0].data,'====');
        this.index++;
        this.myChart.setOption(this.optionCureen);
      }, this.rollTime);
    },
    stopData() {
      this.timeDataFlag && clearTimeout(this.timeDataFlag);
    },
    startData() {
      if (this.rollData && (_.get(this.optionsEnd.series, '0.data') || []).length) {
        this.lightIndex = 0;
        this.setTimeData();
      }
    },
    setTimeData() {//动态选中模块
      this.stopData();
      this.timeDataFlag = setInterval(() => {
        this.myChart.dispatchAction({
          type: 'showTip',         //提示框
          seriesIndex: 0,
          dataIndex: this.lightIndex % this.optionCureen.series[0].data.length
        });
        this.lightIndex++;
      }, 2000)
    }
  }
}
</script>
<style lang="less" scoped>
.pie-box {
  position: relative;

  .row-data {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
  }
}

.no-data-echarts {
  height: 100%;
  position: relative;

  span {
    left: 0;
    text-align: center;
    position: absolute;
    top: 45%;
  }
}
</style>
